@import url(font-awesome.min.css);
body {
	font-family: 'Open Sans' !important;
	font-size: 15px;
	background: url(../images/bg.jpg) no-repeat center top;
	margin: 0
}
fieldset {
	border: 1px solid #ccc;
	padding: 30px 50px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}
fieldset.inner { 
padding:10px 30px 20px;
margin:30px auto 20px;
-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	background-color:#f4f4f4;
	border:1px solid #206a8d
 }
legend {
	width: auto;
	display: inline;
	text-decoration: none;
	border-bottom: none;
	font-size: 1.2em;
	padding: 0px 5px;
	margin-left:-20px
}

.header-box { 
padding:5px; 
background-color:#399bca;
margin:-10px -10px 10px;
color:#FFF
}

.cash-text {
	margin:-10px;
	padding:10px;
	height:149px;
	text-align:right;
	font-size:4em;
	padding-top:20px;
	background-color:#399bca;
	color:#FFF
}

.small-text { font-size:20px !important }

fieldset.inner > legend { padding:3px 20px; border:1px solid #206a8d; background-color:#399bca; color:#FFF; font-size:1em;-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; }
.container {
	background-color: #FFF
}

.comment {
	color: #F00
}

#main-logo {
	position: absolute;
	left: 20px;
	top: 5px
}
.line-header {
	border-bottom: 1px solid #999;
	padding: 5px 10px;
	font-weight: 600;
	color: #000;
	font-size: 1.4em
}
.line-header > i {
	font-size: 1.2em
}
#bg-change > .change-bg {
	width: 20px;
	height: 20px;
	border: 1px solid #ccc;
	margin-left: 5px;
	cursor: pointer
}
.footer {
	padding: 10px;
	text-align: center;
	background-color: #428bca;
	color: #FFF;
	margin: auto -15px
}

.box-detail {
	padding: 10px 5px
}
.small-text {
	font-size: 0.8em
}
#login-box {
	border: 1px solid #CCC;
	padding: 10px
}
.carousel {
	margin-left: -15px;
	margin-right: -15px
}
.media-img {
	width: 25%;
	border: 1px solid #999
}
.media-info {
	width: 72%
}
.media-info > h4 {
	margin-top: 0px
}
#news-list {
}
.news-detail {
	border-bottom: 1px solid #CCC;
	padding: 10px 0px
}
.news-detail:last-child {
	border-bottom: none
}
#banner-right > ul {
	margin: 0;
	padding: 0;
	list-style: none
}
#banner-right > ul > li {
	margin-bottom: 10px
}
#header-bar {
	height: 60px;
	width: 100%;
	background: #FFF;
	background: url(../images/hd2.jpg) left top no-repeat;
	background-size: 100%;
	position: relative
}
#top-bar {
	height: 25px;
	width: 100%;
	background: #46629e;
	-moz-box-shadow: 0px 2px 2px #333;
	-webkit-box-shadow: 0px 2px 2px #333;
	box-shadow: 0px 2px 2px #333
}
#detail-area {
	background-color: #FFF
}
#right-side {
	position: relative;
	background-color: #fff;
	width: 80%;
	float: left
}
#footer-detail {
	border-top: 1px solid #CCC;
	bottom: 15px;
	height: 15px;
	width: 97%;
	position: absolute;
	padding-top: 5px;
	font-size: 0.9em
}
#navigator-bar {
	padding: 5px 10px;
	background-color: #ccc;
	margin: 10px 0px
}
#page-header {
	margin: 10px 0px;
	font-weight: 500;
	font-size: 30px
}
#bg-change {
	font-size: 15px;
	margin-top: 5px
}
#detail-area > .theme-bg-1, #bg-change > #theme-bg-1 {
	background-color: #FFFFFF !important
}
#detail-area > .theme-bg-2, #bg-change > #theme-bg-2 {
	background-color: #f1f2f3 !important
}
#detail-area > .theme-bg-3, #bg-change > #theme-bg-3 {
	background-color: #fefef4 !important
}
#detail-area > .theme-bg-4, #bg-change > #theme-bg-4 {
	background-color: #edf9ff !important
}


/* BEGIN FORM 
-----------------------------------*/

.form-wizard-box.theme-bg-1:after {
	border-left-color: #FFFFFF
}
.form-wizard-box.theme-bg-2:after {
	border-left-color: #f1f2f3
}
.form-wizard-box.theme-bg-3:after {
	border-left-color: #fefef4
}
.form-wizard-box.theme-bg-4:after {
	border-left-color: #edf9ff
}
#form-nav {
	margin: 70px auto;
	width: 82%;
	position: relative
}
.2-box {
	width: 40% !important
}
.form-wizard {
	position: absolute;
	top: -40px;
	text-align: center
}
.form-wizard-box {
	background-color: #ccc;
	text-align: center;
	width: 280px;
	height: 50px;
	padding-top: 12px;
	margin: auto;
	color: #333;
	font-size: 18px;
	cursor: pointer
}
.form-wizard-box:after {
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-right: none;
	border-left: 50px solid #fcfcfc;
	content: '';
	display: inline-block;
	position: absolute;
	top: 0px;
	left: 0px;
}
.form-wizard-box:before {
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-right: none;
	border-left: 50px solid #ccc;
	content: '';
	display: inline-block;
	position: absolute;
	top: 0px;
	right: -50px;
}

#form-nav .active {
	background: #399bca;
	color: #FFF
}
#form-nav .active:before {
	border-left-color: #399bca
}
.form-wizard-box.green {
	background: #2ff16b
}
.form-wizard-box.green:hover {
	border-left-color: #2ff16b
}
.form-wizard-box.red {
	background: #fb2021
}
.form-wizard-box.red:hover {
	border-left-color: #fb2021
}
.form-wizard-box:hover {
	background-color: #8dc5fd
}
.form-wizard-box:hover:before {
	border-left-color: #8dc5fd
}
.form-wizard a:hover {
	text-decoration: none
}
#form-2, #form-3 {
	display: none
}
.box-first {
	left: -34px;
	z-index: 3
}
.box-2 {
	left: 32%;
	z-index: 2
}
.box-last {
	right: -20px;
	z-index: 1
}
.form-wizard-text {
	font-size: 16px
}

/* END FORM 
-----------------------------------*/



/* Side Menu
----------------------------------*/
/***
Page sidebar
***/
#side-menu-bar {
	background-color: #ddd;
	width: 20%;
	float: left;
	border-right: 1px solid #399bca
}
/* ie8 fixes */
.ie8 .page-sidebar {
	position: absolute;
	width: 225px;
}
.page-sidebar.navbar-collapse {
	padding: 0;
}
.page-sidebar-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	margin: 0;
	padding: 0;
}
.page-sidebar-menu > li {
	display: block;
	margin: 0;
	padding: 0;
	border: 0px;
	margin: 0px 0px 7px 5px
}
.page-sidebar-menu > li.info {
	padding: 10px 15px;
	color: #FFF;
	background-color: #399bca;
	margin: 5px auto 20px 5px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom: 5px solid #27779d
}
.page-sidebar-menu > li.start > a {
	border-top-color: transparent !important;
}
/*.page-sidebar-menu > li:last-child > a,
.page-sidebar-menu > li.last > a {
   border-bottom-color: transparent !important;
}*/

.page-sidebar-menu > li > a {
	display: block;
	position: relative;
	margin: 0;
	border: 0px;
	padding: 10px 15px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 300;
	background: #FFF;
	color: #399bca;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom: 3px solid #399bca;
}
.add-border-top {  /*border-top:1px solid #3480a3  !important*/
}
.page-sidebar-menu li a {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.page-sidebar-menu > li > a i {
	font-size: 16px;
	margin-right: 5px;
	text-shadow: none;
}
.page-sidebar-menu > li.break {
	margin-bottom: 20px;
}
.page-sidebar-menu > li.active > a {
	border: none;
	text-shadow: none;
}
.page-sidebar-menu > li.active > a .selected {
	display: block;
	width: 8px;
	height: 25px;
	background-image: url(../images/sidebar-menu-arrow.png);
	float: right;
	position: absolute;
	right: 0px;
	top: 8px;
}
.page-sidebar ul > li > a > .arrow:before {
	float: right;
	margin-top: 0px;
	margin-right: 5px;
	display: inline;
	font-size: 16px;
	font-family: FontAwesome;
	height: auto;
	content: "\f104";
	font-weight: 300;
	text-shadow: none;
}
.page-sidebar-menu > li > a > .arrow.open:before {
	float: right;
	margin-top: 0px;
	margin-right: 3px;
	display: inline;
	font-family: FontAwesome;
	height: auto;
	font-size: 16px;
	content: "\f107";
	font-weight: 300;
	text-shadow: none;
}
/* bagin: sidebar menu badges */
.page-sidebar-menu li > a > .badge {
	float: right;
	margin-top: 1px;
	margin-right: 13px;
}
/* end: sidebar menu badges */

.page-sidebar-menu .sub-menu {
	padding: 0;
}
.page-sidebar-menu > li > ul.sub-menu {
	display: none;
	list-style: none;
	clear: both;
	margin: 0px 0px 0px 0px;
	border-bottom: 3px solid #399bca;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
}
.page-sidebar-menu > li.active > ul.sub-menu {
	display: block;
}
.page-sidebar-menu > li > ul.sub-menu > li {
	background: none;
	margin: 0px;
	padding: 0px;
	background-color: #FFF;
}
.page-sidebar-menu > li > ul.sub-menu > li:last-child {
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
}
.page-sidebar-menu > li > ul.sub-menu > li > a {
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px;
	padding-left: 20px !important;
	text-decoration: none;
	font-size: 14px;
	font-weight: 300;
	background: #abe0f9;
	border-bottom: 1px solid #ddf1fb;
	color: #256b8d
}
/* 3rd level sub menu */
.page-sidebar-menu > li > ul.sub-menu > li ul.sub-menu {
	display: none;
	list-style: none;
	clear: both;
	margin: 0px 0px 0px 0px;
}
.page-sidebar-menu > li > ul.sub-menu li > a > .arrow:before {
	float: right;
	margin-top: 1px;
	margin-right: 20px;
	display: inline;
	font-size: 16px;
	font-family: FontAwesome;
	height: auto;
	content: "\f104";
	font-weight: 300;
	text-shadow: none;
}
.page-sidebar-menu > li > ul.sub-menu li > a > .arrow.open:before {
	float: right;
	margin-top: 1px;
	margin-right: 18px;
	display: inline;
	font-family: FontAwesome;
	height: auto;
	font-size: 16px;
	content: "\f107";
	font-weight: 300;
	text-shadow: none;
}
.page-sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu {
	display: block;
}
.page-sidebar-menu > li > ul.sub-menu > li ul.sub-menu li {
	background: none;
	margin: 0px;
	padding: 0px;
	margin-top: 1px !important;
}
.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a {
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 300;
	background-color: #d8f1fd;
}
.page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
	padding-left: 30px;
}
.page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
	padding-left: 80px;
}
.page-sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu > li.active ul.sub-menu {
	display: block;
}
.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a > i {
	font-size: 13px;
}
/* sidebar search */
.page-sidebar .sidebar-search {
	padding: 0;
	margin: 0;
}
.page-sidebar .sidebar-search .form-container {
	margin: 15px 20px 15px 20px;
	height: 35px;
	padding-top: 7px;
}
.page-sidebar .sidebar-search .form-container .submit {
	display: block;
	float: right;
	margin-top: 3px;
	width: 13px;
	height: 15px;
	background-repeat: no-repeat;
	box-shadow: none;
	border: 0px;
	padding: 0px;
	outline: none !important;
}
.page-sidebar .sidebar-search .form-container input[type="text"] {
	margin: 0px;
	width: 165px;
	border: 0px;
	padding: 0 !important;
	font-size: 14px !important;
	box-shadow: none !important;
	font-size: 14px;
	font-weight: normal;
}
.page-sidebar .sidebar-search .form-container input[type="text"]:focus {
	outline: none !important;
}
.page-sidebar-menu > li:hover >a {
	background-color: #399bca;
	color: #FFF;
	border-bottom: 3px solid #27779d
}
.page-sidebar-menu > li.active >a {
	border-bottom: 3px solid #27779d;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-bottom-left-radius: 0px;
	background-color: #399bca;
	color: #FFF;
	border-bottom: 3px solid #27779d
}
.page-sidebar-menu > li >ul.sub-menu > li:hover >a, .page-sidebar-menu > li > ul.sub-menu > li.active >a {
	background-color: #0595dc;
	color: #FFF
}
.menu-last-child >a, .menu-last-child:hover >a {
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
}
.menu-last-child.active >a {
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-bottom-left-radius: 0px;
}
.page-sidebar-menu > li >ul.sub-menu > li > ul.sub-menu > li:hover >a, .page-sidebar-menu > li > ul.sub-menu > li >ul.sub-menu > li >a.active {
	background-color: #7ccbec
}

.bar-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	height: 25px;
	margin-right: 5px
}
.bar-menu > li {
	float: left;
	position: relative;
	padding-top: 3px;
	margin-left: 5px
}
.bar-menu > li.admin-info {
	padding-top: 1px;
	font-size: 14px
}
.bar-menu > li > a {
	color: #FFF;
	padding: 0px 20px
}
.bar-menu > li > a:hover {
	text-decoration: none
}
.bar-menu > li > a i {
	font-size: 1.4em
}
.bar-menu > li > a > span.badge {
	background-color: #F00;
	color: #FFF;
	position: absolute;
	top: 1px;
	right: 5px
}
.bar-menu > li.admin-info > a {
	background-color: #5e729f;
	padding: 3px 20px 3px 20px
}
.popup-info {
	position: absolute;
	top: 25px;
	right: 0px;
	z-index: 9;
	display: none;
	opacity: 0;
	padding-top: 5px
}
.notification {
	background-color: #FFF;
	border: 1px solid #999;
	padding: 10px;
	text-align: center;
	min-width: 250px;
	min-height: 20px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px
}
.notification > i {
	font-size: 12px
}
.notification:after {
	border-top: 8px solid transparent;
	border-bottom: 8px solid #999;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	content: '';
	display: inline-block;
	position: absolute;
	top: -11px;
	right: 22px;
}
li.envelope-main:hover > .popup-info, li.admin-info:hover > .popup-info {
	display: block;
	opacity: 1
}
.form-detail hr {
	border-color: #ccc
}
.form-detail {
	padding: 40px 15px;
	margin: 20px auto;
	width: 80%
}
.form-list {
	padding: 50px 10px;
	margin: 20px auto;
	width: 100%
}
.search-box {
	background-color: #FFF;
	border: 1px solid #CCC;
	padding: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px
}
#hide-button {
	cursor: pointer
}
#hide-button i {
	font-size: 1.2em
}
.save-by {
	font-size: 0.8em;
	color: #666;
	padding: 3px
}
.search-footer {
	background-color: #e3e4e4;
	margin: 0px -10px -10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;
	padding: 5px 0px
}
.no-radius {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px
}
.search-header {
	margin: -10px -10px -10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
	background-color: #399bca;
	color: #FFF;
	padding: 10px 10px;
	font-size: 1.05em
}
.no-radius {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px
}
ul.page-list {
	list-style: none;
	margin: 0;
	padding: 0
}
ul.page-list > li {
	display: inline;
	border: 1px solid #CCC;
	padding: 5px 10px
}
ul.page-list > li:hover, ul.page-list > li.active {
	background-color: #399bca;
	color: #FFF;
	cursor: pointer
}
table.table-list, table.table-input {
	border-collapse: collapse;
	border: 1px solid #CCC;
	width: 100%;
	margin-top: 10px;
	font-size: 14px
}
table.table-list th, table.table-input th {
	padding: 10px 5px;
	background-color: #399bca;
	color: #FFF;
	border: 1px solid #ccc;
	border-collapse: collapse;
	text-align: center;
	font-weight: normal
}
table.table-input th {
	text-align: right
}
table.table-input td {
	text-align: left !important;
	background-color: #FFF
}
table.table-list td, table.table-input td {
	padding: 5px;
	color: #333;
	border: 1px solid #ccc;
	border-collapse: collapse;
	text-align: center;
	font-weight: normal
}
table.table-list tr.even {
	background-color: #f4f4f4 !important
}
table.table-list tr.odd {
	background-color: #FFF !important
}
.text-left-table {
	text-align: left !important
}
.table-action > i {
	font-size: 1.3em;
	margin-right: -2px;
	cursor: pointer;
	border: 1px solid #CCC;
	width: 30px;
	height: 27px;
	padding-top: 2px;
	background-color: #ddd
}
.table-action > i:hover {
	background-color: #399bca;
	color: #fff
}
table td.colum-highlight {
	background-color: #d1fcfd
}
table th.colum-highlight {
	background-color: #00abad
}

.form-step-nav { width:80%; margin:auto; position:relative; height:70px; margin-top:40px }

#step-way { border-bottom:8px solid #CCC ; position:absolute; top:30px; width:95% }

.form-step-box { position:absolute;display:inline-block }
.form-step-box.box-2 { left:40% }
.form-step-box > .step-link { padding:13px 30px;
-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	background-color:#a5daf3;
	margin-left:10px;
	font-size:45px;
	border:3px solid #399bca
	
 }
 .step-text { margin-top:20px; text-align:center }
 
 .form-step-box >.step-link:hover,.form-step-box >.step-link.active { color:#fff; text-decoration:none; background-color:#399bca;border:3px solid #399bca }


.highlight-blue { background-color: #c3e8fa }
.highlight-blue-2 { background-color:#43bcf6; font-weight:bold; font-size:1.1em; color:#FFF !important }

.box-red { border:1px solid #F00; background:rgba(255,0,0,0.1); padding:10px; margin-top:20px;-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; }
.box-blue { border:1px solid #39F; background: rgba(51,153,255,0.1); padding:10px; margin-top:20px
;-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;  }
	
.flim-white { position:absolute; left:0px; top:0px; width:100%; height:100%; background-color:#fff; font-size:0.9em ; display:none}


/* margin
 -------------------------------------------------------------*/
 
/* Margin Top */
.mt-5 {
	margin-top: 5px
}
.mt-10 {
	margin-top: 10px
}
.mt-20 {
	margin-top: 20px
}
.mt-30 {
	margin-top: 30px
}
.mt-40 {
	margin-top: 40px
}
.mt-50 {
	margin-top: 50px
}
.mt-60 {
	margin-top: 60px
}
.mt-70 {
	margin-top: 70px
}
.mt-80 {
	margin-top: 80px
}
/* Margin Right */
.mr-5 {
	margin-right: 5px
}
.mr-10 {
	margin-right: 10px
}
.mr-20 {
	margin-right: 20px
}
.mr-30 {
	margin-right: 30px
}
.mr-40 {
	margin-right: 40px
}
.mr-50 {
	margin-right: 50px
}
.mr-60 {
	margin-right: 60px
}
.mr-70 {
	margin-right: 70px
}
.mr-80 {
	margin-right: 80px
}
/* Margin Left */
.ml-5 {
	margin-left: 5px
}
.ml-10 {
	margin-left: 10px
}
.ml-15 {
	margin-left: 15px
}
.ml-20 {
	margin-left: 20px
}
.ml-30 {
	margin-left: 30px
}
.ml-40 {
	margin-left: 40px
}
.ml-50 {
	margin-left: 50px
}
.ml-60 {
	margin-left: 60px
}
.ml-70 {
	margin-left: 70px
}
.ml-80 {
	margin-left: 80px
}
/* Margin Bottom */
.mb-5 {
	margin-bottom: 5px
}
.mb-10 {
	margin-bottom: 10px
}
.mb-20 {
	margin-bottom: 20px
}
.mb-30 {
	margin-bottom: 30px
}
.mb-40 {
	margin-bottom: 40px
}
.mb-50 {
	margin-bottom: 50px
}
.mb-60 {
	margin-bottom: 60px
}
.mb-70 {
	margin-bottom: 70px
}
.mb-80 {
	margin-bottom: 80px
}
.pt-10 {
	padding-top: 10px
}


/* for DataTable */
.alignCenter { text-align: center; }
/* for DataTable - hide search box ���Ы�͹�Ѻ�ѹ�Ѻ search ��ҹ�� */
.dataTables_filter {
   display: none;
}




/*  #Mobile (Portrait) 320px **/
@media only screen and (min-width: 100px) and (max-width: 479px) {
#right-side {
	width: 100%
}
#form-nav {
	border-bottom: 5px solid #ccc;
	margin: 70px auto;
	width: 80%;
	position: relative
}
.form-wizard {
	position: absolute;
	top: -25px;
	text-align: center
}
.form-wizard-box {
	border: 2px solid #666;
	width: 50px;
	height: 50px;
	padding-top: 8px;
	font-size: 18px;
}
.form-wizard-text {
	font-size: 14px
}
.box-2 {
	left: 37%;
}
}

/* #Mobile (Landscape)
----------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
#right-side {
	width: 100%
}
#form-nav {
	border-bottom: 5px solid #ccc;
	margin: 70px auto;
	width: 80%;
	position: relative
}
.form-wizard {
	position: absolute;
	top: -25px;
	text-align: center
}
.form-wizard-box {
	border: 2px solid #666;
	width: 50px;
	height: 50px;
	padding-top: 8px;
	font-size: 18px;
}
.form-wizard-text {
	font-size: 14px
}
.box-2 {
	left: 37%;
}
}

/* #Tablet (Portrait)
----------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
#right-side {
	width: 100%
}
#form-nav {
	border-bottom: 5px solid #ccc;
	margin: 70px auto;
	width: 80%;
	position: relative
}
.form-wizard {
	position: absolute;
	top: -25px;
	text-align: center
}
.form-wizard-box {
	border: 2px solid #666;
	width: 50px;
	height: 50px;
	padding-top: 8px;
	font-size: 18px;
}
.form-wizard-text {
	font-size: 14px
}
.box-2 {
	left: 43%;
}
}

/* #Tablet (Landscape)
----------------------------------------------------------------------*/
@media only screen and (min-width: 959px) and (max-width: 1177px) {
}

  .modal-lg-auto {
    width: auto;
  }
